<template>
	<view class="userLayout">
		<view class="row">登陆次数: {{user.loginTimes}}</view>
		<view class="row">上次登陆时间:{{user.loginTime}}</view>
		<view class="row">账号创建时间: {{user.createTime}}</view>
		<view class="row">账号更新时间: {{user.updateTime}}</view>
		<view class="row">账号:{{user.phoneNumber}}</view>
		<input class="row" placeholder="请输入新用户名" v-model="user.userName" />
		<input class="row" placeholder="请输入新密码" v-model="user.password" />
		<button type="primary" @click="onUpdate">修改账户</button>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onShow } from "@dcloudio/uni-app";
	import { User } from "@/types/user";
	import { getUser, updateUser } from "@/services/sysUserApi";
	import { getStore } from "@/utils/getToken";

	/**
	 * 查询用户数据
	 */
	let user = ref<User>({})
	function readUser() {
		getUser(getStore('id'), '').then(res => {   // 两个可选参数,第一个参数是sysUserId,第二个是phoneNumber,可缺省
			user.value = res
		});
	}

	/**
	 * 修改用户信息的点击事件函数
	 */
	function onUpdate() {
		updateUser(user.value).then(res => {
			uni.showToast({
				title: res
			})
			readUser()                                // 更新后刷新数据
		})

	}

	onShow(() => {
		readUser()
	})
</script>

<style lang="scss" scoped>
	.userLayout {
		width: 730rpx;
		margin: 10rpx auto; // 两个参数 上下/左右
		border: 1px solid#eee;
		border-radius: 15rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
		background-color: #fafafa;

		.row {
			height: 80rpx;
			margin: 10rpx 40rpx; // 两个参数 上下/左右
			padding: 0rpx 20rpx;
			border: 1px solid#eee;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
		}
	}
</style>